<template>
  <div class="" ref="wrapperRef">
    <FlameGraphForm ref='formRef' :podList="podList" :containerList='containerList' @onValuesChange="onValuesChange"
      @getTableData='getTableData'></FlameGraphForm>
    <div :style='{
      display: "flex", justifyContent: "flex-end", marginBottom: "8px"
    }'>
      <ga-button class="mr8" @click="formRef.value.resetFields()">
        重置
      </ga-button>
      <ga-button type="primary" @click='getTableData'>
        查询
      </ga-button>
    </div>
    <ga-table :columns='columns' :data='tableData' ref="tableRef" :loading='loading' rowKey="pid"
      :expandable="expandable" show-total show-page-size @expand="onExpand"></ga-table>
  </div>
</template>

<script setup>
import { onMounted, ref, watch } from 'vue';
import useFlameForm from './useFlameForm';
import useFlameGraphTable from './useFlameGraphTable';
import dayjs from 'dayjs';
import FlameGraphForm from './FlameGraphForm.vue';
import { bus } from '@/utils/eventBus';
const props = defineProps({
  node: {
    type: Object,
    default: () => ({})
  },
})
const wrapperRef = ref()
const formRef = ref()
const tableRef = ref()
const { podList, containerList, getPodList, getContainerList } = useFlameForm(props)
const { loading, tableData, expandable, expandedKeys, getFlameGraphData, columns, onExpand } = useFlameGraphTable({ wrapperRef, tableRef })


const getTableData = () => {
  if (formRef.value && "form" in formRef.value) {
    const { duration, podName, containerName, masterIp,
      namespace,
      workloadName: workload,
      workloadKind: type, } = Object.assign(
        {},
        formRef.value.values,
        props.node
      );
    console.log(
      Object.assign({}, formRef.value.values, props.node),
      "result data"
    );

    if (!containerName) return;
    // console.log(formRef.value, "current");
    const [from, to] = duration.map((t) =>
      dayjs(t).format("YYYY-MM-DD HH:mm:ss")
    );

    const params = {
      masterIp,
      namespace,
      workload,
      type,
      // type,
      podName,
      containerName,
      // processId,
      // threshold,
      from,
      to,
    };
    getFlameGraphData({ ...params });
    expandedKeys.value = ([]);
  }
}
const onValuesChange = (changedValues, allVal) => {
  console.log(changedValues, "changed", allVal);
  // if ("podName" in changedValues) {
  //   getContainerList(changedValues["podName"]);
  // } else {
  //   getTableData();
  // }
};
watch(() => props.node, (node) => {
  if (!node.podName) {
    getPodList();
  } else {
    getContainerList(node.podName);
  }
})
watch(podList, (podList) => {
  if (podList.length) {
    getContainerList(podList[0].value);
  }
})
onMounted(() => {
  if (!props.node.podName) {
    getPodList();
  } else {
    getContainerList(node.podName);
  }
  bus.on('updateTopoNodeDetail', () => {
    if (!props.node.podName) {
      getPodList();
    } else {
      getContainerList(node.podName);
    }
  })
})
</script>

<style scoped lang="scss"></style>
